<template>
  <div class="">
    <p :class="type">{{ text }}</p>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    type: String,
  },
};
</script>

<style lang="scss" scoped>
p{
    margin: 30px 0;
}
.green {
  width: 100%;
  background: #dddddd;
  text-align: center;
  line-height: 80px;
  color: white;
  margin-top: 0.23rem;
  font-size: 30px;
  letter-spacing: 0.02rem;
  border-radius: 0.06rem;
  height: 80px;
  background: linear-gradient(to right, #81c125, #1aac19);
}
.blue {
  width: 100%;
  background: #dddddd;
  text-align: center;
  line-height: 80px;
  color: white;
  margin-top: 0.23rem;
  font-size: 30px;
  letter-spacing: 0.02rem;
  border-radius: 0.06rem;
  height: 80px;
  background: linear-gradient(to right, #4bb0ff, #6149f6);
}
.ccc {
  width: 100%;
  background: #dddddd;
  text-align: center;
  line-height: 80px;
  color: white;
  margin-top: 0.23rem;
  font-size: 30px;
  letter-spacing: 0.02rem;
  border-radius: 0.06rem;
  height: 80px;
  background: #dddddd;
}
</style>
